<script setup>
import { ref } from 'vue'
import PrimaryButton from '@/components/PrimaryButton.vue'

// 表单数据
const username = ref('')
const password = ref('')
// 确认密码（注册时使用）
const confirmPassword = ref('')
// 控制当前显示的是登录还是注册表单
const isLoginForm = ref(true)

// 登录方法
const handleLogin = () => {
  console.log('登录', username.value, password.value)
  // 这里添加登录逻辑
}

// 注册方法
const handleRegister = () => {
  if (isLoginForm.value) {
    // 如果当前是登录表单，点击注册按钮则切换到注册表单
    toggleForm()
  } else {
    // 如果当前是注册表单，点击注册按钮则执行注册逻辑
    console.log('注册', username.value, password.value, confirmPassword.value)
    // 这里添加注册逻辑
  }
}

// 切换表单
const toggleForm = () => {
  isLoginForm.value = !isLoginForm.value
  // 切换表单时清空输入
  username.value = ''
  password.value = ''
  confirmPassword.value = ''
}
</script>

<template>
  <view class="login-layout" style="
    --van-cell-horizontal-padding: 0rpx;
  ">
    <!-- 顶部渐变黑色区域 -->
    <view class="login-header flex-center">
      <view class="logo-area">
        <view class="title c-f tc fs-44 animated-title">Welcome<br>{{ isLoginForm ? 'Login' : 'Register' }}</view>
      </view>
    </view>

    <!-- 底部弹出框区域 -->
    <view class="login-form-container">
      <view class="login-form" :class="{ 'form-login': isLoginForm, 'form-register': !isLoginForm }">
        <view class="form-title m-b-30 animated-title">{{ isLoginForm ? '登录' : '注册' }}</view>
        <van-cell-group inset>
          <van-field v-model="username" label="账号" placeholder="请输入账号" label-align="top" />
          <van-field v-model="password" label="密码" placeholder="请输入密码" label-align="top" type="password" />
          <transition name="slide-fade">
            <van-field v-if="!isLoginForm" v-model="confirmPassword" label="确认密码" placeholder="请再次输入密码"
              label-align="top" type="password" />
          </transition>
        </van-cell-group>
      </view>

      <view class="btn-box m-t-30">
        <view class="p-lr-20">
          <PrimaryButton :text="isLoginForm ? '登录' : '注册'" padding-t-b="25rpx"
            @click="isLoginForm ? handleLogin() : handleRegister()" class="btn-animated" />
        </view>
        <view @click="toggleForm" class="m-t-30 p-lr-20 tc fs-24 underline">
          <text class="btn-animated">
            {{ isLoginForm ? '没有账号？去注册' : '已有账号？去登录' }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.login-layout {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #F7F8FA;
  box-sizing: border-box;
}

.login-header {
  width: 100%;
  height: 50vh;
  background: linear-gradient(to bottom, #000000, #F7F8FA);

  .logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 100rpx;
      font-weight: bold;
      line-height: 1.5;
    }
  }
}

.login-form-container {
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 20rpx;
  transform: translateY(-50%);

  .login-form {
    background-color: #fff;
    border-radius: 30rpx;
    box-shadow: 0 -5rpx 20rpx rgba(0, 0, 0, 0.1);
    padding: 50rpx 30rpx;
    transition: all 0.5s ease;

    .form-title {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      color: #1a1617;
    }

    .btn-group {
      padding: 0 20rpx;
      margin-bottom: 20rpx;

      .btn-item {
        width: 48%;
        text-align: center;
      }
    }
  }
}

// 表单切换动画
.form-login {
  transform: translateX(0);
  opacity: 1;
}

.form-register {
  transform: translateX(0);
  opacity: 1;
}

.form-login-enter-active,
.form-login-leave-active,
.form-register-enter-active,
.form-register-leave-active {
  transition: all 0.5s ease;
}

.form-login-enter-from,
.form-register-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}

.form-register-enter-from,
.form-login-leave-to {
  transform: translateX(50px);
  opacity: 0;
}

// 确认密码字段的滑动动画
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}

// 标题动画
.animated-title {
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 按钮动画
.btn-animated {
  transition: transform 0.2s ease;

  &:active {
    transform: scale(0.98);
  }
}
</style>